﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucObservaciones.ascx.cs"
	Inherits="CANO.WebSite.contacts.movimientos" %>
<form id="Form1" enctype="multipart/form-data" method="post" action="" class="fields">
<!-- Forms (plain layout, cleaner) -->
<script src="../js/jquery-1.8.2.js" type="text/javascript"></script>
	<script src="../js/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
	<script src="../js/timepicker/jquery-ui-timepicker-addon.js" type="text/javascript" ></script> 
<div id="tabs-1">
	<fieldset class="last">
		<legend><strong>Generar observación.</strong></legend>
		<label for="some21">
			Fecha Observación:</label>
		<asp:UpdatePanel runat="server" ID="UpdatePanel1">
			<ContentTemplate>
				<input type="text" size="50" id="txtFechaObservacion" class="txt" runat="server" />
				<label for="some22">
					Observación:</label>
				<textarea name="some22" id="txtObservacion" cols="40" rows="2" runat="server" style="width: 800px;
					max-width: 800px;"></textarea>
					<div style="display:none;">
						<asp:Button ID="btnAgregarObservacion" runat="server" />
					</div>
			</ContentTemplate>
		</asp:UpdatePanel>
		<div style="float: right; margin-top: 10px;">
		<input id="inputAgregarObservacion" type="button" class="button" value="Agregar Observacion"/>
		</div>
		<input type="hidden" runat="server" id="hiddenUserName" />
		</fieldset>
	<asp:Panel  ID="pnlObservacionesList" runat="server">
	<fieldset class="last">
		<legend><strong>Observaciones</strong></legend>
		<!-- ToDo: Hacer el que al agregar se muestre, limpie el genearar observación y del lado del servidor guardarlas en sessión para mostrarlas -->
		<div id="divObservacionesList">
			<div id="divNoObservaciones"> No hay observaciones para este contacto.</div>
		</div>
	</fieldset>
	</asp:Panel>
		
</div>
</form>
<script>
	$(document).ready(function () {

		$('input[id*="txtFechaObservacion"]').datetimepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd-mm-yy",
			currentText: "Ahora",
			closeText: "Listo",
			timeText: "Hora",
			hourText: "Hora",
			minuteText: "Minuto"
		});

		$('input[id*="txtFechaNacimiento"]').datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd-mm-yy"
		});
		$("#inputAgregarObservacion").click(function () {
			$('input[id*="btnAgregarObservacion"]').click(function () {

				//Get Data
				var fechaObservacionValue = $('input[id*="txtFechaObservacion"]').val();
				var observacionValue = $('textarea[id*="txtObservacion"]').val();
				var observacionUsuario = $('input[id*="hiddenUserName"]').val();


				//Create Label y Textbox para FECHA
				var labelFechaObservacion = $('<label for="some21">Fecha Observación:</label>');
				var txtFechaObservacion = $('<input type="text" size="50" class="txt"/>');
				$(txtFechaObservacion).val(fechaObservacionValue);

				//Create Label y Textbox para Generado Por
				var labelObservacion = $('<label for="some22">Observación:</label>');
				var txtObservacion = $('<textarea name="some22" cols="40" rows="2" style="width: 800px; max-width: 800px;"></textarea>');
				$(txtObservacion).text(observacionValue);

				//Create Label y Textbox para Generado Por
				var labelObservacionUsuario = $('<label for="some21">Generada por:</label>');
				var txtObservacionUsuario = $('<input type="text" size="50" class="txt"/>');
				$(txtObservacionUsuario).val(observacionUsuario);


				$("#divObservacionesList").append(labelFechaObservacion);
				$("#divObservacionesList").append(txtFechaObservacion);

				$("#divObservacionesList").append(labelObservacionUsuario);
				$("#divObservacionesList").append(txtObservacionUsuario);

				$("#divObservacionesList").append(labelObservacion);
				$("#divObservacionesList").append(txtObservacion);

				$("#divNoObservaciones").hide();
			});
			$('input[id*="btnAgregarObservacion"]').click();
		});
	});
</script>